<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<title>赌我会瘦</title>
<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
</head>
<!-- end header -->

<body>
  <div class="page-group">
    <div class="page page-current open-page bg-light-gray">
      <header class="bar bar-nav fb-header has-img-header">
        <a href="${ctx.host}/mall" class="pull-left logo"> <img src="${ctx.resource}/images/rule-header-left.png"></a>
        <h1 class="title">
          <img src="${ctx.resource}/images/rule-header-title-black.png">
        </h1>
        <a href="${ctx.host}/profile" class="pull-right user-cover"> <img src="${user.avatar}"></a>
      </header>

      <c:if test="${userBet.status eq 'PAID'}">
        <div class="bar bar-footer fb-footer">
          <a href="javascript:void(0);" id="submit" class="button button-big fb-button">开启挑战</a>
        </div>
      </c:if>

      <div class="content">
        <div class="content-padded challenger-info">
          <div class="challenger-cover">
            <div class="bet-title">
              ${user.nickname}的${userBet.bet.name}
              <p class="no-margin">
                <fmt:formatDate value="${userBet.bet.startDate}" pattern="yyyy.MM.dd" />
                -
                <fmt:formatDate value="${userBet.bet.endDate}" pattern="yyyy.MM.dd" />
              </p>

              <div class="deadline-text">距离挑战结束</div>
              <div class="deadline clearfix flipclock" data-end="${userBet.bet.endDateString}">
                <c:set var="restDays" value="${userBet.bet.restDays}"></c:set>
		            <!--<div class="section" data-section="year">year</div>-->
		            <div class="item section" data-section="day">DAYS</div>
		            <div class="item section" data-section="hour">HOURS</div>
		            <div class="item section" data-section="minute">MINUTES</div>
		            <div class="item section" data-section="second">SECONDS</div>
              </div>
              <%-- <div class="deadline clearfix">
                <c:set var="restDays" value="${userBet.bet.restDays}"></c:set>
                <div class="item">
                  <div class="number">
                    ${restDays[0]}
                  </div>
                  <div>DAYS</div>
                </div>
                <div class="item">
                  <div class="number">${restDays[1]}</div>
                  <div>HOURS</div>
                </div>
                <div class="item">
                  <div class="number">${restDays[2]}</div>
                  <div>MINUTES</div>
                </div>
              </div> --%>
            </div>
          </div>
          <c:if test="${userBet.status eq 'PAID'}">
            <div>
              <p class="color-red" style="margin-top: 1.25rem; margin-bottom: 0;">
                您的初始体重<small>&nbsp;(KG)&nbsp;</small>:
              </p>
              <%-- <div class="item-input">
                <input type="text" name="weight" placeholder="请填写您的当前体重(KG)" value="${userBet.beforeWeight}" />
              </div> --%>
              <div class="slider-ruler">
                <input type="hidden" name="weight" value="${userBet.beforeWeight}" />
						    <div id="slider-box"></div>
                <div class="value text-center" style="margin-top: .25rem;font-size: .6rem; line-height: 1;" data-weight="${userBet.beforeWeight}"><span style="font-size: 1.6rem;"></span>kg</div>
						    <p class="no-margin text-center" style="font-size: .6rem;">体重</p>
						  </div>
              
              <div class="item-input clearfix video-uploadarea">
                <div class="file-input-wrapper">
                  <a href="javascript:void(0);" id="uploadVideo" class="video-button btn-file-input" style="height: 2.2rem; color: #CD2233; position: relative; display: block;"> 审核视频<small>（请拍摄体重秤与全身视频）</small><i class="iconfont icon-camera pull-right" style="font-size: 1.2rem;"></i>
                  </a> <input type="file" name="selectVideo" accept="video/*" capture="camcorder" />
                </div>
                <input type="hidden" name="selectVideoPath" /> <a href="javascript:void(0);" id="exampleVedio" class="pull-right" style="font-size: .7rem; color: #fff; background-color: #131313; margin-top: .2rem; padding: 0 5px; display: inline-block;">查看范例视频</a>
              </div>

              <div class="video-showarea hide" id="showVideo" style="position: relative; width: 100%; height: 11rem;" data-video="${userBet.beforeVedio}">
                <div class="close" style="position: absolute; text-align: center; right: 0px; top: 0px; z-index: 10000000; width: 80px; height: 30px; font-size: .7rem; color: #fff; line-height: 30px; background-color: rgba(201, 40, 59, .6); border-radius: 3px;">删除视频</div>
              </div>

              <div class="tips">
                <p class="no-margin" style="color: #2b2b2b; font-weight: bold;">TIPS:</p>
                <div class="no-margin">
                  <p class="no-margin">·&nbsp;视频拍摄建议穿着修身服饰;</p>
                  <p class="no-margin">·&nbsp;拍摄内容须包含面部、全身及称重数字。</p>
                </div>
              </div>
            </div>

          </c:if>

        </div>
      </div>
    </div>
  </div>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/profile/bet-open.js" />
  <script type="text/javascript">
      require(['page/profile/bet-open'], function(page) {
        page.init({
          jsConfig: JSON.parse('${jsConfig}'),
          betId: '${userBet.bet.id}',
          userId: '${userBet.user.id}',
          userName: '${userBet.user.nickname}',
          beforeVideo: '${userBet.beforeVedio}',
          avatar: '${userBet.user.avatar}',
          "url": window.__CTX__.domain + "/users/" + "${user.id}" + "/bets/" + "${userBet.bet.id}" + "/share",
          "status": '${userBet.status}'
        })
      })
    </script>
</body>
</html>